<template>
  <div class="container-width">
    <div class="custom-slider mar-b-10 mar-t-23">
      <div class="flex v-align-c mar-t-2">
        <span class="font-32 font-color-3 font-w pad-r-20">{{ content.propMap.mainTitle || '新品推荐' }}</span>
        <span>{{content.propMap.subTitle}}</span>
        <!-- <div class="font-14 tabs-link pad-l-5 mar-t-3">
          <span :class="recommendIndex ? '' : 'actived'" @click="recommendEls(0)">每日新款</span>
          <span :class="recommendIndex === 1 ? 'actived' : ''" @click="recommendEls(1)">实力卖家</span>
          <span :class="recommendIndex === 2 ? 'actived' : ''" @click="recommendEls(2)">买手精选</span>
          <span :class="recommendIndex === 3 ? 'actived' : ''" @click="recommendEls(3)">找档口</span>
        </div> -->
        <div class="flex-item" />
        <div class="flex v-align-c cursor-p">
          <span class="font-color-2c font-16 mar-r-7">更多</span>
          <img :src="iconMore" alt="" class="height-20">
        </div>
      </div>
      <div class="flex mar-t-16 mar-b--10">
        <div class="swiper-le mar-r-10">
          <el-carousel height="674px" arrow="never" class="carousel">
            <el-carousel-item v-for="(itemSwiper, indexSwiper) in content.guideList" :key="indexSwiper">
              <img :src="itemSwiper.imgUrl" alt="" class="swiper-img cursor-p" @click="handleJumpPage(itemSwiper)">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="flex-item">
          <div class="goods-list flex flex-wrap mar-r--10">
            <div v-for="(itemGoods, indexGoods) in content.goodsList" :key="indexGoods"
              class="goods-bar mar-r-10 mar-b-10 cursor-p position-r" @click="goodsEls(itemGoods)">
              <el-image class="image" :src="itemGoods.imgUrl" lazy />
              <div class="goods-info font-white">
                <div class="flex flex-between">
                  <div class="_line-1">{{itemGoods.title}}</div>
                </div>
                <div class="flex flex-between v-align-c pad-t-6">
                  <div class="price font-16 font-w">￥{{itemGoods.distributePrice || '0.00'}}</div>
                  <div class="font-12 btn-goods font-white border-radius-2">铺货</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  import iconMore from '@/assets/images/icon_more_circle.png'
  export default defineComponent({
    name: 'CustomSliderSecond',
    props: {
      content: {
        type: Object,
        default: () => ({})
        // type: Array,
        // default: () => []
      }
    },
    setup() {
      const router = useRouter()
      const recommendIndex = ref(0)
      onMounted(() => {})
      const recommendEls = (val: number) => {
        recommendIndex.value = val
      }
      const goodsEls = (item: any) => {
         jumpPage(router, 1, 1, 2001, '?goodsId=' + item.goodsId, 1)
      }

      const handleJumpPage = (item: any) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }

      return {
        iconMore,
        recommendIndex,
        recommendEls,
        goodsEls,
        handleJumpPage
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $goodsWidth: 272px;

  .custom-slider {
    .tab-box {
      position: relative;
      top: 2px;
    }

    .s-img {
      .el-image {
        width: 264px;
        height: 368px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .tabs-link {
      span {
        padding: 3px 8px;
        margin-right: 13px;
        cursor: pointer;
        color: #666;

        &.actived {
          color: #fff;
          background: $darkBlue;
          border-radius: 20px;
        }
      }
    }

    .swiper-le {
      width: 272px;

      ::v-deep(.carousel) {
        &.el-carousel {
          --el-carousel-indicator-width: 10px;
          --el-carousel-indicator-height: 10px;

          .el-carousel__button {
            border-radius: 50px;
            background-color: #000;
          }
        }
      }
    }

    .el-carousel__item {
      text-align: center;
    }

    .swiper-img {
      width: 272px;
      height: 674px;
    }

    .goods-list {
      .goods-bar {
        width: $goodsWidth;
      }

      ::v-deep(.image) {
        display: block;
        width: $goodsWidth;
        height: 332px;
      }

      .goods-info {
        width: $goodsWidth;
        // height: 142px;
        padding: 4px 8px 8px 8px;
        box-sizing: border-box;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
      }

      ._line-1 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      ._line-2 {
        /* line-height: 1.4; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      .btn-goods {
        background: #2de2dd;
        padding: 0 12px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
</style>
